<!--
 * @Description: 外链
 * @Author:: luoguomei
-->
<template>
	<div class="linkChart-panel" :style="{ pointerEvents: isOperable ? 'auto' : 'none', color: '#ffffff' }">
		<!-- 若为预览状态则可以操作iframe.若设计状态则不能操作iframe -->
		<iframe :src="stylesForm.url" width="100%" height="100%" />
	</div>
</template>
<script setup>
import { watch, ref, onMounted, onUnmounted, computed } from 'vue';
import { cloneDeep } from 'lodash';

const props = defineProps({
	value: {
		type: String,
	},
	styles: {
		type: [Object, Array],
		default: () => ({}), // 默认空对象
	},
	isOperable: {
		type: Number,
		default: 0,
	},
	loopTimer: {
		type: Number,
		default: 0,
	},
});
const baseUrl = ref(); // 记录原始的imgUrl
let stylesForm = ref({});
let intervalId = null; // 保存定时器 ID
// 定时刷新逻辑
const startImageReload = (interval) => {
	if (intervalId) clearInterval(intervalId); // 清除已有定时器
	intervalId = setInterval(() => {
		// 触发 src 的重新计算
		const timestamp = new Date().getTime();
		stylesForm.value.url = `${baseUrl.value}?t=${timestamp}`; // 保持原值，只为触发响应
		console.log(stylesForm.value.url);
	}, interval);
};

// 清理定时器
onUnmounted(() => {
	if (intervalId) clearInterval(intervalId);
});
onMounted(() => {
	// 初始化定时刷新
	if (props.loopTimer > 0 && props.isOperable === 1) {
		startImageReload(props.loopTimer * 1000);
	}
});
// 监听 props.styles 的变化
watch(
	() => props.styles,
	(val) => {
		stylesForm.value = cloneDeep(val);
		baseUrl.value = val.url;
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="scss" scoped>
.linkChart-panel {
	width: 100%;
	height: 100%;
	padding: 10px;
	pointer-events: auto;
}
</style>
